<template>
	<!-- 项目信息管理首页 -->
	<div class="pjInfoMngPage">
		<div class="search-wrap d-flex a-center j-sb">
			<div class="search-left-wrap d-flex a-center">
				<div class="status-box d-flex a-center m-l20">
					<span class="title-label">搜索</span>
					<el-input
						v-model="form.queryName"
						placeholder="根据项目名称或责任部门搜索"
					></el-input>
				</div>
				<div class="status-box d-flex a-center m-l20">
					<span style="width:80px;">项目状态</span>
					<el-select v-model="form.status" class="m-l10">
						<el-option
							v-for="(item, index) in projectStatus"
							:key="index"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</div>
				<div class="status-box d-flex a-center m-l20">
					<span style="width:80px;">位置状态</span>
					<el-select
						multiple
						collapse-tags
						v-model="form.streetCodeList"
						class="m-l10"
					>
						<el-option
							v-for="(item, index) in status_option"
							:key="index"
							:label="item.name"
							:value="item.code"
						></el-option>
					</el-select>
				</div>
				<div class="buttons-box m-l20">
					<el-button
						color="#fc702b"
						style="color: #fff"
						@click.prevent="onQuery"
						>查询</el-button
					>
					<el-button
						color="#f0f0f0"
						style="color: #000000"
						@click.prevent="onReset"
						>重置</el-button
					>
					<el-divider direction="vertical" />
				</div>
			</div>
			<div class="search-right-wrap">
				<div
					class="screen-button d-flex a-center j-center"
					:style="{
						'--screen-button-border-color':
							form.isHidden === '1' ? '#fc7037' : '#CCCCCC',
					}"
				>
					<el-radio
						v-model="form.isHidden"
						label="1"
						@click.prevent="radioChange(form.isHidden)"
						>隐藏已完结项目</el-radio
					>
				</div>
			</div>
		</div>
		<public-table
			class="m-t20"
			index
			:page="page"
			:tableData="tableData"
			:tableOption.sync="tableOption"
			@page-change="onPageChange"
		>
			<template #projectName="scope">
				<span
					style="color: #fc7037; cursor: pointer"
					@click="toPjInfoManageDetail(scope.row)"
				>
					{{ scope.row.projectName }}
				</span>
			</template>
		</public-table>
	</div>
</template>

<script setup>
import { ElInput, ElSelect, ElOption, ElDivider, ElRadio } from "element-plus";
import PublicTable from "@/components/PublicTable";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { projectInfoApi } from "@/api/biddingProject";
import { projectStatus } from "@/common/dict/dictCollect";

const router = useRouter();

const fullscreenLoading = ref(false);
const form = reactive({
	queryName: "",
	status: "",
	isHidden: "1",
});

const page = reactive({
	total: 0,
	current: 1,
	size: 50,
});

const status_option = ref([]);
const tableData = ref([]);

const tableOption = ref([
	{
		label: "项目状态 ",
		prop: "status",
		formatter: (val, row) => {
			return projectStatus.find((v) => v.value == val)?.label || "-";
		},
	},
	{ label: "项目集名称", prop: "projectSetName" },
	{ label: "项目名称 ", prop: "projectName", slot: true },
	{ label: "项目编号 ", prop: "projectId" },
	{ label: "项目位置 ", prop: "streetName" },
	{ label: "责任主体部门 ", prop: "submitCompany", width: 120 },
	{ label: "项目创建日期 ", prop: "createTime", sortable: true, width: 150 },
	{ label: "计划开始日期", prop: "predictStartTime", sortable: true, width: 150 },
	{ label: "计划结项日期", prop: "predictEndTime", sortable: true, width: 150 },
	{
		label: "招标项目任务 ",
		prop: "taskNum",
		formatter: (val, row) => {
			return row.completedNum + "/" + row.taskNum;
    },
    width: 120
	},
]);

// 查询项目列表
const getProjectPageList = (param) => {
	projectInfoApi.getProjectPageList(param).then((res) => {
		if (res.code === "200") {
			tableData.value = res.data.content;
			page.total = res.data.totalSize;
		}
	});
};

const getLocations = () => {
	projectInfoApi.getLocations("2", "").then((res) => {
		if (res.code == 200) {
			status_option.value = res.data;
		}
	});
};

const radioChange = (e) => {
	if (e === "1") {
		form.isHidden = "0";
	} else {
		form.isHidden = "1";
	}
	getProjectPageList({
		param: {
			...form,
		},
		pageNum: page.current,
		pageSize: page.size,
	});
};

// 根据搜索条件查询
const onQuery = () => {
	page.current = 1;
	getProjectPageList({
		param: {
			...form,
		},
		pageNum: page.current,
		pageSize: page.size,
	});
};

// 重置
const onReset = () => {
	for (let key in form) {
		form[key] = "";
	}
	form.isHidden = "1";
	form.streetCodeList = [];
	page.current = 1;
	page.size = 50;
	getProjectPageList({
		pageNum: page.current,
		pageSize: page.size,
		param: {},
	});
};

const onPageChange = (e) => {
	page.current = e.page;
	page.size = e.limit;
	let param = {
		param: {
			...form,
		},
		pageNum: page.current,
		pageSize: page.size,
	};
	getProjectPageList(param);
};

// 跳转项目详情
const toPjInfoManageDetail = (row) => {
	router.push(`/tender/projectManage/pjInfoManageDetail/${row.projectId}`);
};

onMounted(() => {
	getLocations();
	getProjectPageList({
		pageNum: 1,
		pageSize: 50,
		param: {},
	});
});
</script>

<style lang="scss" scoped>
.pjInfoMngPage {
	.search-wrap {
		.search-left-wrap {
			.search-input-box {
				span {
					font-size: 14px;

					font-weight: 500;
					color: #1a1a1a;
				}
				.el-input {
					width: 284px;
					margin-left: 8px;
					// :deep(.el-input__wrapper) {
					// 	background: #f7f7f7 !important;
					// }
				}
			}
			.status-box {
				font-size: 14px;
				.title-label {
					min-width: 45px;
				}
				// .el-select {
				// 	:deep(.el-input__wrapper) {
				// 		background: #f7f7f7 !important;
				// 	}
				// }
			}
		}
	}
}
</style>
